<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.字符串型 -->
    <script>
        // 'pink' 'pink老师'  '12' 'true'
        var str = '我是一个"高富帅"程序员'
        console.log(str);
        //字符串转义字符 都是\开头，但是这些转义符写到引号里面
        var str1 = "我是'高富帅'\n媛媛"
        console.log(str1);
    </script>
    <!--2. 弹出警示框案例 -->
    <script>
        alert('1972年二三月间。\n雪开始融化。"收破烂"')
    </script>
    <!--3. 字符串拼接-->
    <script>
        //1.检测获取字符串的长度lenght
        var str = 'my name is jake'
        console.log(str.length); //15
        // 2.字符串拼接 + 只要有字符串和其他类型的想拼接 最终结果是字符串类型 
        console.log('沙漠' + '骆驼'); //字符串的沙漠骆驼
        console.log('pink' + 18); //字符串的 pink18
        console.log('pink' + true); //字符串的pinktrue
        console.log(12 + 12); //24
        console.log('12' + 12); //字符串的'1212'
    </script>
    <!-- 4，字符串拼接加强 -->
    <script>
        console.log('pink' + 18); //pink18
        console.log('pink' + 18 + '岁'); //pink18岁
        var age = 18
        console.log('pinkage岁'); //错误
        // 变量不要写到字符串里面，是通过和字符串相连的方式实现的
        console.log('pink老师' + age + '岁');
    </script>
    <!-- 5.显示年龄案例 -->
    <script>
    // 1.弹出一个输入框（prompt），让用户输入
    // 2.把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
    // 3.使用alert语句弹出警示框（输出结果）
    var age = prompt('请输入年龄') 
    var str = '你今年'+ age +'岁了'
    alert(str)
    </script>
     <!-- 5 布尔型Boolean -->
     <script>
        var flag = true //flag布尔型
        var flag1 = false //flage布尔型
        console.log(flag + 1); //2 true参与假发运算当1来看
        console.log(flag1 + 1); //1 false参与加法运算当0来看
     </script>
     <!-- 6.Undefined 和 null -->
     <script>
        //如果一个变量声明未赋值 就是undefined 未定义数据类型
        var str 
        console.log(str); //undefined
        var variable = undefined
        console.log(variable + 'pink'); //undefinedpink
        console.log(variable + 1); //NaN  undefined和数字相加最后结果是NaN
        // null
        var space = null;
        console.log(space + 'pink'); //nullpink
        console.log(space + 1); //1 一个空值加上一个数字等于数字
        console.log(true + space); //1
     </script>

     <!-- 7.获取变量数据类型 -->
     <script>
        var num = 10;
        console.log(typeof num); //number
        var str = 'pink'
        console.log(typeof str); //string
        var flag = true;
        console.log(typeof flag); //boolean
        var vari = undefined
        console.log(typeof vari); //undefiend
        var timer = null;
        console.log(typeof timer); //object
        //prompt取过来的值是字符型的
        var age = prompt('请输入年龄')
        console.log(age);
        console.log(typeof age); //string
         </script>

         <!-- 8.转换成字符串型 -->
         <script>
            // 1.把数字型转换为字符串型 变量.toString()
            var num = 10;
            var str = num.toString();
            console.log(str);
            console.log(typeof str);
            // 2.利用String)(num)
            console.log(String(num));
            // 3.利用 + 拼接字符串的方法实现转换效果，隐式效果
            console.log(num + ''); //打印出来的字面量为黑色
         </script>

         <!-- 9.转化为数字型 -->
         <script>
            var age = prompt('请输入年龄')
            //1.parsetInt（变量）可以把字符串型的转换为数字型，得到是整数
            console.log(parsetInt(age)); //整数
            console.log(parsetInt('3.14')); //3取整
            console.log(parsetInt('3.94')); //3取整
            console.log(parsetInt('120px')); //120 会去到这个px单位
            console.log(parsetInt('rem120px')); //NaN
            //2.parseFloat(变量)可以把字符型的转换为数字型，得到是小数，浮点数
            console.log(parseFloat('3.14')); //3.14
            console.log(parseFloat('120px')); //120 会去掉这个px
            console.log(parseFloat(rem120px)); //NaN
            //3.利用Number(变量)
            var str = '123'
            console.log(Number(str));
            console.log(Number('12'));
            //4.利用算数运算 - * / 隐式转换
            console.log('12' - 0); //12 字面量为蓝色
         </script>

         <!-- 10.计算年龄案例 -->
         <script>
            var year = prompt('请输入出生年份')
            var age = 2022 - year;
            alert('你今年已经'+age+'岁了')
         </script>

         <!-- 11.简单加法器案例 -->
         <script>
            var num1 = prompt('请输入第一个值')
            var num2 = prompt('请输入第二个值')
            var result = parseFloat(num1) + parseFloat(num2);
            alert('你的结果是：' + result);
         </script>

         <!-- 12.转换为布尔型 -->
         <script>
            console.log(Boolean('')); //false
            console.log(Boolean('0')); //false
            console.log(Boolean('NaN')); //false
            console.log(Boolean('null')); //false
            console.log(Boolean('undefined')); //false
         </script>

         <!-- 13.算数运算符 -->
         <script>
            // 1.% 取余（取模）
            console.log(4 % 2); //0
            console.log(5 % 2); //1
            console.log(3 % 5); //3
            // 2.浮点数 算数运算符里面会有问题
            console.log(0.1 + 0.2); //精度有问题
            console.log(0.07 + 100);
            // 3.不能直接拿浮点数进行比较
            var num = 0.1 + 0.3
            console.log(num == 0.4);  //false      
            </script>

            <!-- 14.前置自增运算符 -->
            <script>
            // 1.想要一个变量自己加1 num = num + 1比较麻烦
            var num = 1
            num = num + 1 //++num
            num = num + 1
            console.log(num); //3
            // 2.前置递增运算符 ++写在变量前面
            var age = 10
            ++age
            </script>
</body>
</html>